<template>
  <div class="swiper-demo">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide" style="height:100%" v-for="(item, index) in swiperData" :key="index">
          <div class="picture_container">
            <img class="swiper-img" :src="item.pic" @click="clickImge(item)" />
          </div>
          <p class="swiper-des">{{ item.title }}</p>
        </div>
      </div>
      <div class="swiper-pagination"></div>
    </div>
  </div>
</template>



<script>
import Swiper from 'swiper'; // 注意引入的是Swiper
import 'swiper/css/swiper.min.css' // 注意这里的引入

export default {
  name: 'swiperCustome',
  props: {
    swiperData: Array
  },
  data () {
    return {
      swiper: null,
      show: false
    }
  },
  mounted () {
    this.swiper = new Swiper('.swiper-container', {
      autoplay: {
        delay: 2000,
      },
      slidesPerView: 3,
      // 其他配置项...
    });

  },
  methods: {
    clickImge (data) {
      window.open(data.pic)
    }
  },
  beforeDestroy () {
    // this.swiper.destroy();
  }

}
</script>

<style scoped lang="scss">
.swiper-container {
  width: 700px;
  height: 400px;
  margin: 0 auto;
}

.swiper-slide {
  width: 164px;
  // margin-right: 20px;
  padding-right: 12px;
}

.picture_container {
  border: 1px solid #eeeeee;
  padding-top: 130%;
}

.swiper-des {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  text-align: center;
  margin-top: 10px;
  padding: 0 15px;
  color: #424242;
}

.swiper-img {
  margin: 10px;
  max-width: 100%;
  max-height: 100%;
  vertical-align: middle;
}
</style>